<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="icon" href="__PUBLIC__/imgs/icon/favicon.ico" type="image/ico" sizes="16x16">
    <title><{$title}></title>
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/li.css">

</head>
<body>

    <!-- 导航条开始 -->
        <nav class="navbar-fixed-top" style="background-color: #fff;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <!-- <span class="sr-only">Toggle navigation</span> -->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- 网页logo -->
                    <a class="navbar-brand" href="<{:U('Index/index')}>">
                        <img src="__PUBLIC__/imgs/icon/zhihu-logo03.png" id="logo">
                    </a>
                </div>

                <!-- 导航条内容 content -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav">
                        
                        <li><a href="<{:U('Article/index')}>" style="font-size:15px; font-weight:700; color: #666;" > 文章首页</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="margin-right: 50px;">
                        <li>
                            <!-- 写文章 -->
                                <a href="<{:U('Write/index')}>" style="font-size:15px; font-weight:700; color: #666;" ><span class="glyphicon glyphicon-list-alt"></span> 写文章</a>
                        </li>
                        <li>
                            <!-- 我的文章 -->
                                <a href="<{:U('People/index')}>" style="font-size:15px; font-weight:700; color: #666;">我的文章</a>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        <div class="divline"></div>
        </nav><!--结束导航条-->


<div class="container-fluid">
    <div class="row">

        <notempty name="data.0.arimage">
            <div  style="background: url('__PUBLIC__/imgs/<{$data[0]['arimage']}>'); background-position: center center;height:500px">
                <p style="font-size:45px; color:#fff;text-align:center; padding-top:400px;"><b><{$data[0].artitle}></b></p>
            </div>

        <else/>
            <div class="w100">
                <p style="font-size:35px; color:#000;text-align:center; padding-top:100px;"><b><{$data[0].artitle}></b></p>
            </div>
        </notempty>

        <div class="w100">
            <div class="col-md-6 col-md-offset-3">
            <!-- 内容正文 -->
                <div class="col-md-12 mt30">
                    <p>
                        <a href="<{:U('People/index','uid='.$data[0]['uid'])}>">
                            <img src="__PUBLIC__/imgs/<{$data[0]['uimage']}>" height="45px" width="45px" style="border-radius: 30px;">
                        </a>
                        <a href="<{:U('People/index','uid='.$data[0]['uid'])}>">
                            &nbsp;&nbsp;<{$data.0.uname}>
                        </a>
                        &nbsp;&nbsp;<{$data.0.artime}>
                    </p>
                    <div class="mt50"></div>
                    
                    <div class="w100">
                        <{$data.0.content}>
                    </div>
                    
                    <div class="mt50"></div>
                    <div class="divline"></div>
                    <div class="w100">
                        <div  class="mt20 text-right">
                            <a href="" class="report" article_id="<{$data.0.arid}>">举报</a>
                        </div>
                        <div  class="mt20 h4">
                           <b>
                                <a href="" arid="<{$arid}>" p="1" onclick="return showMore(this)"><{$data.0.ardnum}> 条评论</a>
                           </b>
                        </div>
                        <div  class="mt20 h4">
                            <form action="">
                                <div>
                                    <div class="col-md-2">
                                        <img src="__PUBLIC__/imgs/<{$Think.session.home.image}>" width="45px" height="45px" style="border-radius: 25px;">
                                    </div>
                                    <div class="col-md-10 text-right">
                                        <input type="text" class="form-control mb20" placeholder="写下你的评论">
                                        <button class="btn btn-sm" type="reset">重置</button>
                                        <button class="btn btn-sm" id="arDis" arid="<{$arid}>">提交</button>
                                    </div>
                                </div>
                            
                                
                                <div class="clearfix"></div>
                            </form>

                            <!-- 评论显示区 -->
                            <div id="disShow" class="mt10 mb10">
                                <empty name="list">
                                    <div class="w100 h5 mt10 text-center" style="background-color:#eee; height: 80px; line-height: 80px;">暂无更多评论</div>
                                <else/>
                                    <volist name="list" id="vo">
                                        <div class="mt20">
                                            <div class="col-md-2">
                                                <a href="<{:U('People/index','uid='.$vo['uid'])}>">
                                                    <img src="__PUBLIC__/imgs/<{$vo['uimg']}>" height="45px" width="45px" style="border-radius: 30px;">
                                                </a>
                                            </div>
                                            <div class="col-md-10">
                                                <p class="h5">
                                                    <a href="<{:U('People/index','uid='.$vo['uid'])}>"><b><{$vo.uname}></b></a>
                                                    <notempty name="vo.tuid">
                                                        回复 
                                                        <a href="<{:U('People/index','uid='.$vo['tuid'])}>"><b><{$vo.tuname}></b></a>
                                                    </notempty>
                                                </p>
                                                <p class="h5" style="color: #000">
                                                    <{$vo.adcontent}>
                                                </p>
                                                <!-- 操作 -->
                                                <p class="h6 mt20" style="color: #000">
                                                    <{$vo.adtime}>&nbsp;&nbsp;
                                                    <a href="" class="reply" reply='0' arid="<{$arid}>" tuid="<{$vo.tuid}>" onclick="return showReplayForm(this)" style="color:#666">回复</a>&ensp;&ensp;
                                                    
                                                    <a href=""  onclick="return reportAd(this)"  adid="<{$vo.adid}>" tuid="<{$vo.tuid}>"  style="color:#666">举报</a>
                                                </p>
                                                <div class="dis" style="display: none">
                                                    <form action="">
                                                        <div>
                                                            <div class="col-md-2">
                                                                <img src="__PUBLIC__/imgs/<{$Think.session.home.image}>" width="45px" height="45px" style="border-radius: 25px;">
                                                            </div>
                                                            <div class="col-md-10 text-right">
                                                                <input type="text" class="form-control mb10" placeholder="写下你的评论">
                                                                <button class="btn btn-sm" type="reset">重置</button>
                                                                <button class="btn btn-sm" onclick="return disReply(this)" arid="<{$arid}>" page="<{$p}>" tuid="<{$vo.uid}>">提交</button>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </volist>
                                    <div class="mt20 mb50">
                                        <a href="" arid="<{$arid}>" p="<{$p}>" class="btn btn-sm btn-default form-control" onclick="return showMore(this)">查看更多评论</a>
                                    </div>
                                </empty>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>



    <!--引入jquery-->
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <!--引入bootstrap 的js-->
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function(){
            // 举报文章触发事件
            var reportAr = $('a.report');
            for (var i = 0; i < reportAr.length; i++) {
                $(reportAr[i]).click(function(){
                    if ($(this).html() == '举报') {
                        // console.log($(this).html());
                        if (confirm('你确定要举报该文章?') == true) {
                            $(this).html('-已举报-');
                            $.ajax({
                                type: 'get',
                                url: "<{:U('Article/reportAr')}>",
                                data: 'arid=' + $(this).attr('article_id'),
                            });
                        }
                    }
                    return false; //阻止跳转
                });
            }; // 举报触发事件结束


            // 提交评论
            $('#arDis').click(function(){
                var arid = $(this).attr('arid');
                var content = $(this).prev().prev().val();
                // console.log(content)
                if (content == '') {
                    alert('表单值为空...请完善');
                } else {
                    if (confirm('确定提交评论?') == true) {
                        $.ajax({
                            type: 'get',
                            url: "<{:U('Article/addDiscuss')}>",
                            data: 'arid=' + arid + '&content=' + content,
                            success: function(data){
                                // console.log(data);
                                $('#disShow').html(data);
                            },
                        });
                    }
                };
                return false;
            });
            
        
        }); //jQuery end



        // 原生JS
        // 显示回复表单
        function showReplayForm(act){
            // 获取表单所在div
            var div = act.parentNode.nextSibling.nextSibling;
            if (act.getAttribute('reply') == '0') {
                // console.log(act.parentNode.nextSibling.nextSibling);
                // 显示回复表单
                div.style.display = 'block';
                act.setAttribute('reply', '1');
            } else {
                act.setAttribute('reply', '0');
                div.style.display = 'none';
                // console.log(div);
            };
            return false;
        }

        // 提交评论的回复
        function disReply(act){
            var arid = act.getAttribute('arid');
            var tuid = act.getAttribute('tuid');
            var content = act.previousSibling.previousSibling.previousSibling.previousSibling.value;
            var disShow = document.getElementById('disShow');
            console.log(content);
            // ajax 提交数据
            var xhr = new XMLHttpRequest();
            // console.log();
            xhr.onreadystatechange = function(){
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // console.log(xhr.responseText);
                    var data = xhr.responseText;  //返回一个页面
                    disShow.innerHTML = data;
                }; // end  成功接收数据判断
            }; //end 回调
            //初始化
            xhr.open('get', "<{:U('Article/addReply')}>?arid="+arid+"&tuid="+tuid +"&content="+content, true);
            //发送
            xhr.send();
            return false;
        }


        // 举报评论信息
        function reportAd(act){
            var adid = act.getAttribute('adid');
            if (act.innerHTML == '举报') {
                    console.log(act.innerHTML);
                if (confirm('你确定要举报该评论?') == true) {
                    // ajax 提交数据
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function(){
                        if (xhr.status == 200 && xhr.readyState == 4) {
                            // console.log(xhr.responseText);
                            var data = xhr.responseText;  //返回一个页面
                            act.innerHTML = '-已举报-';
                        }; // end  成功接收数据判断
                    }; //end 回调

                    xhr.open('get', "<{:U('Article/reportAd')}>?adid="+adid, true);
                    xhr.send();
                }; // 弹出框判断结束
            }; // 举报if条件结束
            return false;
        } // 举报评论结束


        // 翻页查看更多
        function showMore(act){
            var arid = act.getAttribute('arid');
            var p = act.getAttribute('p');
            var disShow = document.getElementById('disShow');
            // ajax 提交数据
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // console.log(xhr.responseText);
                    var data = xhr.responseText;  //返回一个页面
                    disShow.innerHTML = '';
                    disShow.innerHTML = data;
                    // console.log(data);
                }; // end  成功接收数据判断
            }; //end 回调

            xhr.open('get', "<{:U('Article/showMore')}>?arid=" + arid + '&p=' + p, true);
            xhr.send();
            return false;
        } // 举报评论结束



    </script>

</body>
</html>

